<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的歌曲列表</title>
</head>
<body>

<div>
   <a href="space.html">大厅</a>
</div>
<div id="app">
    <el-row>
        <a href="addSong.html">创建歌曲</a>
    </el-row>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="作者"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="歌名"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="播放"
                    width="400"
                    class-name="audio-cell">
                <template slot-scope="scope">
                    <audio controls :src="scope.row.songPath"></audio>
                </template>
            </el-table-column>
            <el-table-column
                    prop="likes"
                    label="点赞数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="playCount"
                    label="播放量"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="opera"
                    label="操作">
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">点赞/取消</el-button>
                <el-button type="success">更新</el-button>
                <el-button type="danger">删除</el-button>
            </el-row>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </template>
</div>
</body>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
   new Vue({
       el:"#app",
       mounted(){



           var _this=this;
           axios.get('/MVCDemo/song/getSong').then(function(resp) {
               _this.tableData = resp.data;
           }).catch(function(error) {
               alert("no");
           });
       },
       methods:{
           //分页
           handleSizeChange(val) {
               console.log(`每页 ${val} 条`);
           },
           handleCurrentChange(val) {
               console.log(`当前页: ${val}`);
           }
       },
       data() {
           return {
               tableData: [],

               currentPage: 1,
           };
       }
   })
</script>
</html>